<template>
  <div class="footbox">
    <div class="lenged" style="width: 300px">
      <span>图例</span>
      <div class="epicentre ">
        <img
            src="/static/assets/3d/zz.png"
            alt=""
            srcset=""
            style="width: 25px; height: 25px;"
          />
        <!-- <span class="icon"></span> -->
        <span>震中</span>
      </div>
      <div class="city">
        <span class="icon"></span>
        <span>市州</span>
      </div>
      <div class="county">
        <span class="icon"></span>
        <span>区县</span>
      </div>
      <div class="slice"></div>
    </div>
    <div class="content">
      <div class="autocontent">
        <div class="specific" v-if="store.tree.some((item) => item == 'zzj')">
          <!-- <span style="width: 64px">震中距离</span> -->
          <div class="distance">
            <div class="county">
              <span class="line" style="height: 6px"></span>
              <span style="width: 70px"> 震中距离</span>
            </div>
            <!-- <div class="epicentre">
              <span class="line"></span>
              <span>省距</span></div
            >
            <div class="city">
              <span class="line"></span>
              <span>市距</span>
            </div>
            <div class="county">
              <span class="line"></span>
              <span>县距</span>
            </div> -->
          </div>
        </div>
           <div class="specific sd" v-if="store.tree.some((item) => item == 'sheng')">
          <span class="line" style="background: #878781"></span>
          <span>省界</span>
        </div>
             <div class="specific gsl" v-if="store.tree.some((item) => item == 'lshpfb')">
          <img
            src="/static/assets/3d/icon/地震滑坡点.png"
            alt=""
            srcset=""
            style="width: 25px; height: 25px;"
          />
          <span style="width: 60px">滑坡</span>
        </div>
                 <div class="specific gsl" v-if="store.tree.some((item) => item == 'lshpfb')">
          <img
            src="/static/assets/3d/icon/地震滑坡点.png"
            alt=""
            srcset=""
            style="width: 25px; height: 25px;"
          />
          <span style="width: 60px">崩塌</span>
        </div>
                 <div class="specific gsl" v-if="store.tree.some((item) => item == 'lshpfb')">
          <img
            src="/static/assets/3d/icon/地陷.png"
            alt=""
            srcset=""
            style="width: 25px; height: 25px;"
          />
          <span style="width: 70px">地面沉降</span>
        </div>
                 <div class="specific gsl" v-if="store.tree.some((item) => item == 'lshpfb')">
          <img
            src="/static/assets/3d/icon/泥石流.png"
            alt=""
            srcset=""
            style="width: 25px; height: 25px;"
          />
          <span style="width: 60px">泥石流</span>
        </div>
        <div
          class="specific xx"
          v-if="
            store.tree.some(
              (item) => item == 'xx' || item == 'zx' || item == 'yey' || item == 'gdyx'
            )
          "
        >
          <img
            src="/static/assets/3d/学校.png"
            alt=""
            srcset=""
            style="width: 25px; height: 25px"
          />
          <!-- <div style="width: 25px;
    height: 25px;
    background: #10915e;
    border-radius: 50%;
    line-height: 25px;
    font-weight: bold;
    text-align: center;
    font-size: 16px;">文</div> -->
          <span style="width: 40px">学校</span>
        </div>
        <div
          class="specific yy"
          v-if="store.tree.some((item) => item == 'yy' || item == 'zkyy' || item == 'zhyy')"
        >
          <img
            src="/static/assets/3d/icon/医院.png"
            alt=""
            srcset=""
            style="width: 25px; height: 25px"
          />
          <span style="width: 40px">医院</span>
        </div>
        <div class="specific jc" v-if="store.tree.some((item) => item == 'jc')">
          <img
            src="/static/assets/3d/icon/机场.png"
            alt=""
            srcset=""
            style="width: 25px; height: 25px"
          />
          <span style="width: 40px">机场</span>
        </div>
        <div class="specific tl" style="width: 80px" v-if="store.tree.some((item) => item == 'tl')">
          <!-- <img src="/static/assets/高铁.png" alt="" srcset="" style="width: 25px; height: 25px" /> -->
          <span class="line" style="display: flex; width: 60px">
            <span style="width: 50%; height: 100%; background: #727272"></span>
            <span style="width: 50%; height: 100%; background: #d6d6d6"></span>
          </span>
          <span>铁路</span>
        </div>
        <div class="specific gd" v-if="store.tree.some((item) => item == 'gd')">
          <span class="line" style="background: #e7a132"></span>
          <span>国道</span>
        </div>
        <div class="specific sd" v-if="store.tree.some((item) => item == 'sd')">
          <span class="line" style="background: #028853"></span>
          <span>省道</span>
        </div>
        <div class="specific gsl" v-if="store.tree.some((item) => item == 'gsl')">
          <span class="line" style="background: #d1b371"></span>
          <span>高速路</span>
        </div>
        <div class="specific zxzzzj" v-if="store.tree.some((item) => item == 'zxzzzj')">
          <img
            src="/static/assets/3d/icon/固定台站.png"
            alt=""
            srcset=""
            style="width: 25px; height: 25px"
          />
          <span>中心站</span>
        </div>

        <div class="specific sx" v-if="store.tree.some((item) => item == 'sx')">
          <span class="line" style="background: #03b5ff"></span>
          <span>河流</span>
        </div>
        <div
          class="specific gsl"
          style="width: 80px"
          v-if="store.tree.some((item) => item == 'sk')"
        >
          <span class="line" style="background: #00c0ff; height: 20px"></span>
          <span>水库</span>
        </div>
        <div class="specific lsczdz" v-if="store.tree.some((item) => item == 'lsczdz')">
          <span class="czdz" style="background:#ff0000"></span>
          <span style="width: 70px">成灾地震</span>
        </div>

        <div class="specific lsdz" v-if="store.tree.some((item) => item == 'lsdz')">
          <span class="clsdz" style="background:#0070c0"></span>
          <span style="width: 70px">3.0-3.9</span>
        </div>
          <div class="specific lsdz" v-if="store.tree.some((item) => item == 'lsdz')">
          <span class="clsdz"></span>
          <span style="width: 70px">4.0-4.9</span>
        </div>
        <div class="specific lsdz" v-if="store.tree.some((item) => item == 'lsdz')">
          <span class="zhlsdz"></span>
          <span style="width: 70px">5.0以上</span>
        </div>
        <div
          class="specific gsl"
          style="width: 80px"
          v-if="store.tree.some((item) => item == 'hddl')"
        >
          <span class="line" style="background: #ff0000"></span>
          <span style="width: 80px">活动断裂带</span>
        </div>
        <div
          class="specific rkgw"
          style="margin-left: 15px"
          v-if="store.tree.some((item) => item == 'rkwg')"
        >
          <span style="width: 64px">人口(人)</span>
         <div class="distance">
            <div class="populated-item">
              <span class="line" style="background: #eef8e9; height: 20px"></span>
              <span>&lt;10万</span></div
            >
            <div class="populated-item">
              <span class="line" style="background: #bae4b4; height: 20px"></span>
              <span>&lt;100万</span>
            </div>
            <div class="populated-item">
              <span class="line" style="background: #74c476; height: 20px;width:80px"></span>
              <span>&lt;1000万</span>
            </div>
            <div class="populated-item">
              <span class="line" style="background: #30a355; height: 20px"></span>
              <span>&lt;1亿</span>
            </div>
            <div class="populated-item">
              <span class="line" style="background: #067f32; height: 20px"></span>
              <span>&lt;10亿</span>
            </div>
            <div class="populated-item">
              <span class="line" style="background: #067f32; height: 20px"></span>
              <span>&gt;10亿</span>
            </div>
 
          </div>
        </div>

        <div
          class="specific rkgw"
          style="margin-left: 15px"
          v-if="store.tree.some((item) => item == 'jjwg')"
        >
          <span style="width: 44px">经济(元)</span>
          <div class="distance">
            <div class="populated-item">
              <span class="line" style="background: #feeedf; height: 20px"></span>
              <span>&lt;10万</span></div
            >
            <div class="populated-item">
              <span class="line" style="background: #fdb57a; height: 20px"></span>
              <span>&lt;100万</span>
            </div>
            <div class="populated-item">
              <span class="line" style="background: #f68239; height: 20px;width:80px"></span>
              <span>&lt;1000万</span>
            </div>
            <div class="populated-item">
              <span class="line" style="background: #e85a0c; height: 20px"></span>
              <span>&lt;1亿</span>
            </div>
            <div class="populated-item">
              <span class="line" style="background: #db4800; height: 20px"></span>
              <span>&lt;10亿</span>
            </div>
            <div class="populated-item">
              <span class="line" style="background: #db4800; height: 20px"></span>
              <span>&gt;10亿</span>
            </div>
 
          </div>
        </div>
        <div
          class="specific"
          style="margin-left: 15px"
          v-if="store.tree.some((item) => item == 'hpwxx')"
        >
          <span style="width: 100px">滑坡风险等级</span>
          <div class="distance">
            <div class="populated-item">
              <span
                class="line"
                style="background: #fff; height: 20px; width: 50px; border: 1px solid #8b8686"
              ></span>
              <span>极低</span></div
            >
            <div class="populated-item">
              <span
                class="line"
                style="background: #ffdaa6; height: 20px; width: 50px; border: 1px solid #8b8686"
              ></span>
              <span>低</span>
            </div>
            <div class="populated-item">
              <span
                class="line"
                style="background: #f5b957; height: 20px; width: 50px; border: 1px solid #8b8686"
              ></span>
              <span>中</span>
            </div>
            <div class="populated-item">
              <span
                class="line"
                style="background: #bd7642; height: 20px; width: 50px; border: 1px solid #8b8686"
              ></span>
              <span>高</span>
            </div>
            <div class="populated-item">
              <span
                class="line"
                style="background: #893332; height: 20px; width: 50px; border: 1px solid #8b8686"
              ></span>
              <span>较高</span>
            </div>
          </div>
        </div>

        <div
          class="specific"
          style="margin-left: 15px"
          v-if="store.tree.some((item) => item == 'kspgyxcm' )"
        >
          <span style="width: 34px">烈度</span>
          <div class="distance">
            <div class="populated-item">
              <span
                class="line"
                style="
                  background: rgb(255, 210, 218);
                  height: 20px;
                  width: 50px;
                  border: 1px solid #c7c2c9;
                "
              ></span>
              <span>VI度</span></div
            >
            <div class="populated-item">
              <span
                class="line"
                style="
                  background: rgb(255, 190, 190);
                  height: 20px;
                  width: 50px;
                  border: 1px solid #c7c2c9;
                "
              ></span>
              <span>VII度</span></div
            >
            <div class="populated-item">
              <span
                class="line"
                style="
                  background: rgb(255, 127, 127);
                  height: 20px;
                  width: 50px;
                  border: 1px solid #c7c2c9;
                "
              ></span>
              <span>VIII度</span></div
            >
            <div class="populated-item">
              <span
                class="line"
                style="
                  background: rgb(200, 40, 40);
                  height: 20px;
                  width: 50px;
                  border: 1px solid #c7c2c9;
                "
              ></span>
              <span>IX度</span></div
            >
            <div class="populated-item">
              <span
                class="line"
                style="
                  background: rgb(160, 0, 0);
                  height: 20px;
                  width: 50px;
                  border: 1px solid #c7c2c9;
                "
              ></span>
              <span>X度</span>
            </div>
            <div class="populated-item">
              <span
                class="line"
                style="
                  background: rgb(140, 0, 0);
                  height: 20px;
                  width: 50px;
                  border: 1px solid #c7c2c9;
                "
              ></span>
              <span>IX度</span>
            </div>
          </div>
        </div>

        <div
          class="specific"
          style="margin-left: 15px"
          v-if="store.tree.some((item) =>  item == 'sdqht' || item == 'wdqht')"
        >
          <span style="width: 64px">烈度区划</span>
          <div class="distance">
            <div class="populated-item">
              <span
                class="line"
                style="
                  background: rgb(255, 210, 218);
                  height: 20px;
                  width: 50px;
                  border: 1px solid #c7c2c9;
                "
              ></span>
              <span>VI度</span></div
            >
            <div class="populated-item">
              <span
                class="line"
                style="
                  background: rgb(255, 190, 190);
                  height: 20px;
                  width: 50px;
                  border: 1px solid #c7c2c9;
                "
              ></span>
              <span>VII度</span></div
            >
            <div class="populated-item">
              <span
                class="line"
                style="
                  background: rgb(255, 127, 127);
                  height: 20px;
                  width: 50px;
                  border: 1px solid #c7c2c9;
                "
              ></span>
              <span>VIII度</span></div
            >
            <div class="populated-item">
              <span
                class="line"
                style="
                  background: rgb(200, 40, 40);
                  height: 20px;
                  width: 50px;
                  border: 1px solid #c7c2c9;
                "
              ></span>
              <span>IX度</span></div
            >
            <div class="populated-item">
              <span
                class="line"
                style="
                  background: rgb(160, 0, 0);
                  height: 20px;
                  width: 50px;
                  border: 1px solid #c7c2c9;
                "
              ></span>
              <span>X度</span>
            </div>
            <div class="populated-item">
              <span
                class="line"
                style="
                  background: rgb(140, 0, 0);
                  height: 20px;
                  width: 50px;
                  border: 1px solid #c7c2c9;
                "
              ></span>
              <span>IX度</span>
            </div>
          </div>
        </div>

        <!-- <div
          class="specific"
          style="margin-left: 15px"
          v-if="store.tree.some((item) => item == 'sdqht' || item == 'wdqht')"
        >
          <span style="width: 34px">区划</span>
          <div class="distance">
            <div class="populated-item">
              <span class="line" style="background: #50594b; height: 2px; width: 50px"></span>
              <span>VII度</span></div
            >
            <div class="populated-item">
              <span class="line" style="background: #50594b; height: 4px; width: 50px"></span>
              <span>VIII度</span>
            </div>
            <div class="populated-item">
              <span class="line" style="background: #50594b; height: 6px; width: 50px"></span>
              <span>IX度</span>
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useMapStoreStore } from '../../stores/index'

const store = useMapStoreStore()
const mimeMap = {}

const rkwg = ref(false)
watch(
  () => store.tree,
  (newval) => {
    console.log(newval)

    rkwg.value = store.tree.some((item) => item == 'rkwg')
  }
)
const flag = ref(true)
</script>

<style lang="scss" scoped >
.populated-item .line {
  border: 1px solid #000;
}
.autocontent {
  overflow-x: auto;
  display: flex;
  &::-webkit-scrollbar {
    width: 6px;
    height: 8px;
  }
  &::-webkit-scrollbar-button {
    display: none;
  }
  &::-webkit-scrollbar-thumb {
    background: #01c2ff;
    cursor: pointer;
    border-radius: 4px;
  }
  &::-webkit-scrollbar-corner {
    display: none;
  }
  &::-webkit-resizer {
    display: none;
  }
}
.xx,
.tl,
.sd,
.gsl,
.gd,
.jc,
.yy,
.sx {
  width: 40px;
  height: 40px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 15px;
  .line {
    width: 60px;
    height: 6px;
  }
}
.xx,
.tl,
.yy,
.jc,
.zxzzzj {
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.czdz {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #a50036;
}
.clsdz {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff100;
}
.zhlsdz {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #c00000;
}
.sd {
  // background-image: url(/static/assets/省道.png);
}
.gd,
.sd,
.gsl,
.zxzzzj,
.sx,
.lsczdz,
.lsdz {
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  // background-image: url(/static/assets/国道.png);
}
.lsczdz,
.lsdz {
  width: 70px;
}

.gsl {
  // background-image: url(/static/assets/高速路口.png);
}
.footbox {
  height: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;

  background: rgba(0, 0, 10, 0.8);

  box-sizing: border-box;
  border: 1px solid #0e9cff;

  box-shadow: inset 0px 0px 80px 0px rgba(1, 194, 255, 0.4);
  color: #fff;
}
.el-row,
.el-col {
  height: 100%;
}
.lenged {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 20px;

  .epicentre,
  .city,
  .county {
    display: flex;
    align-items: center;
  }

  .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid #fff;
    position: relative;
    margin-right: 10px;
  }
  .epicentre .icon {
    // background-color: red;
    border: none;
    background-image: url(/static/assets/3d/zz.png);
  }
  .city .icon::after {
    content: '';
    width: 50%;
    height: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #fff;
    border-radius: 50%;
  }
  .county .icon::after {
    content: '';
    width: 6px;
    height: 6px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 50%;
  }
  .slice {
    width: 2px;
    height: 24px;
    opacity: 1;

    background: #8b8686;
  }
}
.content {
  height: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  flex: 1;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 6px;
    height: 8px;
  }
  &::-webkit-scrollbar-button {
    display: none;
  }
  &::-webkit-scrollbar-thumb {
    background: #01c2ff;
    cursor: pointer;
    border-radius: 4px;
  }
  &::-webkit-scrollbar-corner {
    display: none;
  }
  &::-webkit-resizer {
    display: none;
  }
  .specific {
    height: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    .distance {
      display: flex;
      margin-left: 20px;
      div {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: end;
        .line {
          display: inline-block;
          width: 60px;
          height: 6px;
          background: #9a27e1;
        }
      }
      .city .line {
        height: 4px;
        background: #c92e22;
      }
      .county .line {
        height: 2px;
        background: #255bdc;
      }
    }
  }
  .populated {
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 20px;
    .distance {
      display: flex;
      margin-left: 20px;
      div {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: end;
        font-size: 16px;
        color: #333333;
        .line {
          display: inline-block;
          width: 60px;
          height: 15px;
          margin-bottom: 5px;
        }
      }
    }
  }
}
</style>